<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,tr,td,th{
            border:1px solid green;
            border-collapse: collapse;
            text-align: center;
            margin-top:20px;
        }
        th,td{
            padding:10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="newName">
        <input type="text" v-model="newSex">
        <input type="text" v-model="newTel">
        <input type="text" v-model="newAge">
        <button @click="addClass">添加</button>
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>联系方式</th>
                <th @click="ageSort('age')" class="ages">年龄</th>
            </tr>
            <tr v-for='(item,index) in newStudent'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                newName:"",
                newSex:"",
                newTel:"",
                newAge:"",
                newStudent:[
                    {"id":1,"name":"张三","sex":"男","tel":13212345644,"age":18},
                    {"id":2,"name":"李四","sex":"男","tel":13212345644,"age":21},
                    {"id":3,"name":"赵柳","sex":"女","tel":13212345644,"age":16},
                    {"id":4,"name":"王五","sex":"男","tel":13212345644,"age":19},
                    {"id":5,"name":"小名","sex":"女","tel":13212345644,"age":22},
                    {"id":6,"name":"大刘","sex":"男","tel":13212345644,"age":17}
                ],
                ageAll:[]
            },
            methods:{
                addClass(){
                    let len = this.newStudent.length;
                    let arr = new Object();
                    arr.id = len+1;
                    arr.name = this.newName;
                    arr.sex = this.newSex;
                    arr.tel = this.newTel;
                    arr.age = this.newAge;
                    this.newStudent.push(arr);
                    this.newName = '';
                    this.newSex = '';
                    this.newTel = '';
                    this.newAge = '';
                },
                ageSort(age){
                    this.newStudent.sort(this.compare(age));
                    document.querySelector('.ages').innerHTML = '年龄↓';
                },
                compare(attr){
                    return function (a,b){
                        let val1 = a[attr];
                        let val2 = b[attr];
                        return val2 - val1;
                    }
                }
            }
        });
    </script>
</body>
</html>